<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        body{
            background:url('/bg.png') no-repeat;
            background-size:cover;
        }
    </style>
</head>
<body>
<div id="chart" style="width:100%;height:100%;"></div>
<script src="/jquery.min.js"></script>
<script src="/echarts.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById("chart"));
    // var data = [
    //     {
    //     name: '节点1',
    //     code: 'node1',
    //     value: {
    //         interfaceNum:26,
    //         kpiNum: 26,
    //         alarmNum: 26
    //     },
    //     x: 0.5,
    //     y: 0.9
    // },
    // {
    //     name: '节点2',
    //     code: 'node2',
    //     value: {
    //         interfaceNum: 0,
    //         kpiNum: 0,
    //         alarmNum: 0
    //     },
    //     x: 0.25,
    //     y: 0.6
    // },
    //     {
    //         name: '节点7',
    //         code: 'node7',
    //         value: {
    //             interfaceNum: 0,
    //             kpiNum: 0,
    //             alarmNum: 0
    //         },
    //         x: 0.1,
    //         y: 0.3
    // },
    //     {
    //     name: '节点8',
    //     code: 'node8',
    //     value: {
    //         interfaceNum: 0,
    //         kpiNum: 0,
    //         alarmNum: 0
    //     },
    //     x: 0.3,
    //     y: 0.3
    // },
    //
    //     {
    //     name: '节点3',
    //     code: 'node3',
    //     value: {
    //         interfaceNum: 0,
    //         kpiNum: 0,
    //         alarmNum: 0
    //     },
    //     x: 0.75,
    //     y: 0.6
    // }, {
    //     name: '节点4',
    //     code: 'node4',
    //     value: {
    //         interfaceNum: 0,
    //         kpiNum: 0,
    //         alarmNum: 0
    //     },
    //     x: 0.5,
    //     y: 0.3
    // },
    // {
    //     name: '节点5',
    //     code: 'node5',
    //     value: {
    //         interfaceNum: 0,
    //         kpiNum: 0,
    //         alarmNum: 0
    //     },
    //     x: 0.7,
    //     y: 0.3
    // },
    //     {
    //         name: '节点6',
    //         code: 'node6',
    //         value: {
    //             interfaceNum: 0,
    //             kpiNum: 0,
    //             alarmNum: 0
    //         },
    //         x: 0.9,
    //         y: 0.3
    //     }
    // ];

    // var links = [
    // {
    //     source: 'node1',
    //     target: 'node11',
    // },
    // {
    //     source: 'node1',
    //     target: 'node12',
    // },
    // {
    //     source: 'node1',
    //     target: 'node13',
    // },
    // {
    //     source: 'node11',
    //     target: 'node111',
    // },
    // {
    //     source: 'node11',
    //     target: 'node112',
    // },
    // {
    //     source: 'node12',
    //     target: 'node121',
    // },
    // {
    //     source: 'node13',
    //     target: 'node131',
    // },
    // {
    //     source: 'node2',
    //     target: 'node7',
    // },
    // {
    //     source: 'node2',
    //     target: 'node8',
    // },
    //
    // ];

    var line ; //行：把画布上画几行信息框
    var column ; //列：把画布上画几列信息框
    var links=[];//包含起始点的指向
    var data=[];
    var posX=0;
    var posY=0;
    var index=0;
    $.ajax({
        url: 'data3.json',
        type: 'get',
        success: function (node) {
            debugger;
            line=node[0].maxHeight;
            column=node[0].maxWidth;
            renderTreeToArray(node);
            var option = {
                grid: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                },
                xAxis: {
                    type: 'value',
                    axisLine:{
                        show:false
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false
                    },
                    max: 1,
                    min: 0
                },
                yAxis: {
                    type: 'value',
                    axisLine:{
                        show:false
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false
                    },
                    max: 1,
                    min: 0
                },
                series: getSeries()
            };
            myChart.setOption(option);
        }
    })
    function renderTreeToArray(val){
        // debugger;
        // index++;
        // console.log(index);
        for(var n=0;n<=val.length-1;n++){
            data.push({
                name:val[n].child.flowName,
                code:val[n].child.flowName,
                value: {
                    interfaceNum: 0,
                    kpiNum: 0,
                    alarmNum: 0
                },
                x:val[n].x,
                y:val[n].y
            });
            if(val[n].parent!=='null'){
                links.push({
                    source:val[n].parent,
                    target:val[n].child.flowName
                })
            }
            if(val[n].childList){
                renderTreeToArray(val[n].childList);
            }
        }
    }
    function getScatterData() {
        var scatterData = [];
        //画布宽高
        var c_w = myChart.getWidth();
        var c_h = myChart.getHeight();
        //计算信息框的宽高
        var w = c_w / (column * 2);
        var h = c_h / (line * 2);
        for (var i = 0; i < data.length; i++) {
            //计算每个label框中心点位置（value）
            scatterData.push(
                {
                    code: data[i].name,
                    value: [data[i].x, data[i].y],
                    w: w,
                    h: h,
                    info: data[i].value
                });
        }
        return scatterData;
    }

    function getLinesData() {
        var linesData = [];
        var map = {};
        for (var i = 0; i < data.length; i++) {
            map[data[i].code] = data[i];
        }
        for (var i = 0; i < links.length; i++) {
            var source = map[links[i].source];
            var target = map[links[i].target];
            //画布宽高
            var c_w = myChart.getWidth();
            var c_h = myChart.getHeight();
            //计算信息框的宽高
            var w = c_w / (column * 2);
            var h = c_h / (line * 2);
            //计算信息框上下边框的中点的位置
            source.top = {
                x: source.x,
                y: (source.y * c_h + (1 / 2 * h)) / c_h
            };
            source.bottom = {
                x: source.x,
                y: (source.y * c_h - (1 / 2 * h)) / c_h
            };

            target.top = {
                x: target.x,
                y: (target.y * c_h + (1 / 2 * h)) / c_h
            };

            target.bottom = {
                x: target.x,
                y: (target.y * c_h - (1 / 2 * h)) / c_h
            };

            if (source.bottom.y > target.top.y) {
                linesData.push(getLine([
                    [source.bottom.x, source.bottom.y],
                    [target.top.x, target.top.y]
                ]));
            } else if (source.top.y < target.bottom.y) {
                linesData.push(getLine([
                    [source.top.x, source.top.y],
                    [target.bottom.x, target.bottom.y]
                ]));
            }
        }
        return linesData;
    }

    function getLine(coords) {
        return {
            name: '',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            zlevel: 4,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: 'rgba(235,235,235,0.3)',
                symbolSize: 8
            },
            lineStyle: {
                normal: {
                    color: 'rgba(107,113,122,0.8)',
                    width: 1,
                    curveness: 0
                }
            },
            data: [{
                coords: coords
            }]
        };
    }

    function getSeries() {
        var series = [];
        series.push(
            {
                type: 'scatter',
                symbol:'image://label_bg.png',
                zlevel: 2,
                symbolSize: function(value, params) {
                    return [params.data.w, params.data.h];
                },
                label: {
                    normal: {
                        show: true,
                        color:'#fff',
                        formatter:function(params){
                            var texts=[
                                '{title|'+params.data.code+'}',
                                '{tit|告警数量}'+'{num|'+params.data.info.alarmNum+'}',
                                '{tit|监测指标数量}'+'{num|'+params.data.info.kpiNum+'}',
                                '{tit|核心接口数量}'+'{num|'+params.data.info.interfaceNum+'}'
                            ]
                            return texts.join('\n');
                        },
                        lineHeight:20,
                        rich:{
                            title:{
                                fontSize:20,
                                color:'#fff',
                                align:'center',
                                padding:[0,0,-20,0]
                            },
                            tit:{
                                color:'#c4e4fc',
                                fontSize:15,
                                padding:[0,10,0,0]
                            },
                            num:{
                                align:'right',
                                fontSize:20,
                                color:'#fff'
                            }
                        },
                    }
                },
                data: getScatterData()
            });
        // return series;
        return series.concat(getLinesData());
    }


</script>
</body>
</html>